<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>


	</head>


	<body>
		<canvas id="Mycanvas" width="1400px" height="750px"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("Mycanvas");
			var ctx = canvas.getContext("2d");
			var arcArr = [
				//								[20, 100, 20, 5, 0,"#00ff00"],
				//								[20, 100, 20, 10, 0,"#ff0000"],
				//								[20, 100, 20, 5, 10,"#0000ff"],
			];
			setInterval(function() {
				
				for(var i = 0; i < 30; i++) {


					var vx = parseFloat(Math.random() * 5) + 0;
					if(Math.random() > 0.5) {
						vx = -vx
					}


					var vy = (Math.random() * 5) + 20;
					var r = parseInt(Math.random() * 256);
					var g = parseInt(Math.random() * 256);
					var b = parseInt(Math.random() * 256);
					arcArr.push([700, 700, 10, vx, -vy, "rgb(" + r + ", " + g + ", " + b + ")"])
				}
			}, 1000)
			setInterval(function() {
			
				ctx.fillStyle = "rgba(200, 255, 200, 0.3)";
				ctx.fillRect(0, 0, 1400, 750);
				for(var i = 0; i < arcArr.length; i++) {


					ctx.beginPath();
					ctx.fillStyle = arcArr[i][5];
					//				var arcX = vararcarr[0][0];
					//				var arcY = vararcarr[0][1];
					//				var arcrR= vararcarr[0][2];
					//				var arcVX = vararcarr[0][3];
					//				var arcVY = vararcarr[0][4];
					ctx.arc(arcArr[i][0], arcArr[i][1], arcArr[i][2], 0, 2 * Math.PI);
					ctx.fill();
					arcArr[i][1] = arcArr[i][1] + arcArr[i][4];
					arcArr[i][0] = arcArr[i][0] + arcArr[i][3];
					arcArr[i][2] = arcArr[i][2] -Math.random()*0.1


					arcArr[i][4] = arcArr[i][4] + 0.5;
					if(arcArr[i][2]<Math.random()*5){
						arcArr.splice(i,1)
					}
					if(arcArr[i][1] > 750 - arcArr[i][2]) {
						arcArr[i][4] = -arcArr[i][4]
						arcArr[i][4] = arcArr[i][4] * 0.8;
						arcArr[i][1] = 750 - arcArr[i][2];


					}
//					if(arcArr[i][0] > 1400 - arcArr[i][2]) {
//						arcArr[i][3] = -arcArr[i][3]
//
//						arcArr[i][0] = 1400 - arcArr[i][2];
//
//					}
//					if(arcArr[0][0] < arcArr[0][2]) {
//						arcArr[0][3] = -arcArr[0][3]
//
//						arcArr[0][0] = arcArr[0][2];


//					}
				}
			}, 16)
		</script>
	</body>


</html>